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— Chapter 1~ 

What is HTML? 

HTML stands for "Hyper Text Mark-up Language" 

HTML is the bricks and mortar of the WWW. Without HTML the 
World Wide Web could not have become as important as it is today. 

HTML is a document formatting language common the all computers 
on the WWW. html permits cross platform communication between 
Macs, Apples, SUNs, PCs and others to view a document in a similar 
way. 

Every webpage that you visit uses HTML in some way, you can view 
the HTML code behind a website in Internet Explorer by selecting: 
View > Source 
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-- Chapter 2— 

Your first code 

HTML has two sections, the "Head" section and the "Body" section. 

The head section is where the information about the web page is put for the 
browser. This has nothing to do with the heading that you want to see on your 
web page. 

Things that can be stored in the head section include Keywords for search 
engines or the title of your webpage. 

The body section is where the web page is coded. This is where you put the 
information for your web page. 

We are now going to create our very own webpage, for now we are 
going to create a simple page telling people your name. 
Please follow these instructions: 

1. Create a new folder so you have somewhere to save your 
website, call this folder anything you wish, this is where all 
pages and images for your website will be saved. 

2. Open notepad and type the following code, you may change 
the code in red to suit your needs: 

Type the following code into Notepad 

<html> 
<head> 

<title>My Own Home Page </title> 
</head> 

<body> 

<H1> I am Your-Name and this is my web Page! </Hl> 

</body> 

</html> 
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3. That's it! You have just coded your first webpage. Now save the 
notepad file by selecting "Save as" (make sure you save the file in 
the folder you have just created) 
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In the filename box type "index. html" and from the "Save as type" 
box select "All Files" 
Then click "Save" 

4. You are now ready to view your first webpage, navigate to the 
folder where you saved the file, double click on it and you will see 
your first webpage. It should look something like this: 



| My Own Home Page - Microsoft Internet Explorer 



ZHS 



File Edit View Favorites Tools Help 
©Back Q B @ fi P Search ^ 

Address 



a 



Media 



| C:\Inetpub\wwwroot\ServerSites\WeblarkWeb\Lecture: v 1 Go 



Google 



v] ^.Search Web * { 



I am Your-Name and this is 
my web page! 



Done 



J My Computer 



Now we have created your first page, lets go to chapter 3 and look 
at colours! 
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— Chapter 3 -- 

Adding colour 

When you create a web page you will want to use different 
background and text colours and to add images. This makes the site 
more attractive to visitors and generally makes the website look 
better. Take care not to make the text and background colour the 
same! 

In this exercise we will change the background colour of your 
website you created in Chapter 2, to blue. 

To do this you would add the following HTML code into the body of 
your text file. (To open your first website as a text file and not 
HTML, open the HTML file and select "View>Source"): 

<body bgcolor = "#0000FF"> 

Notice how instead of saying <body bgcolor = blue> We have used 

some strange looking code. 

Don't worry this is called "Hexadecimal colour" and can be used for 

inserting complex colours into your website. 

Click HERE for a full list of colours and their Hexadecimal values. 

If you are finding all of these different colour codes confusing don't 

worry! 

As well as using the Hexadecimal method, you can also use good 

old-fashioned English! Meaning that placing the following code into 

your HTML file would have the exact same effect: 

<body bgcolor = "blue"> 
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When inserted into your code, the code should look like this: 

<html> 
<head> 

<title>My Own Home Page </title> 
</head> 

<body> 

<body bgcolor= "blue"> 

<H1> I am Your-Name and this is my web Page!</Hl> 

</body> 

Test your file by saving it, remember to save it as "index. html" and 
make sure you select "All Files" from the save as type box. 

Your website should now look something like this: 



H My Own Home Page - Microsoft Internet Explorer 



File Edit View Favorites Tools Help 



' Search '-' ". ' Favorites 



D& 



Address ^\ C:\Documents and 5ettings\Dan\DeskJtop\ggt.html 
.... 



▼ I ^ Search Web " r? 1 13 blocked 




Now that we have our background colour sorted out, we can now 
alter the text colour. 

We go about doing this in the same way. This is the code we need 
to insert into our webpage: 

<font color="Red">Text that you want to make red goes 
here</font> 

Notice that you must put </font> after the text has ended. If you 
didn't insert the </font> then your entire document would have the 
text as red. This isn't too important for now but if you ever have 
more than one text colour on a page this may become a problem. 
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Here is how your code should now look: 

<html> 
<head> 

<title>My Own Home Page </title> 
</head> 

<body> 

<body bgcolor= "blue"> 

<font color="Red"> 

<H1> I am Your-Name and this is my web Page!</Hl> 

</font> 

</body> 

IMPORTANT TIP: A common error when coding with colours and 
HTML in general are simple spelling mistakes. 
Remember that when typing "color" it is the American spelling, 
make sure you don't use the English spelling "colour" or your HTML 
wont work. 

Now lets move onto Chapter 4 and look at adding images 
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— Chapter 4~ 

Adding Images 

Adding an image is a simple way to make your website more 

attractive. 

For this exercise find any image you like, and put it into the same 

folder as the webpage. Rename your image to "myimage" 

We are now going to insert the image underneath our text. 

Once again open up your HTML file in notepad so you can see the 

code. 

This is what the code is going to look like: 

<img src="myimage.gif"x/a> 

Notice that my image file is called "myimage.gif", your file may be 
"myimage.jpg" or "myimage. bmp" depending on how you saved 
your picture. To find out what type of picture it is right click on the 
picture and select "Properties". 

Once inserted your code will look like this: 

<html> 
<head> 

<title>My Own Home Page </title> 
</head> 

<body> 

<body bgcolor= "blue"> 

<font color="Red"> 

<H1> I am Your-Name and this is my web Page!</Hl> 

<img src="myimage.gif"x/a> 

</font> 

</body> 
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Save your file and run it to view the results. Your page will look 
something like this: 



'H My Own Home Page - Microsoft Internet Explorer 



File Edit View Favorites Tools Help 



%&# 
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Address |^J C:\Docurments and 5e ttings\Dan\My Documents\EBooks\Basic HTML\ggt.html 
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I am Your-Name and this is mv web Page! 




IMPORTANT TIPS: Most websites will store their images in a 

separate folder called "images". 

To show a picture from the images folder the code would look like 

this: 

<img src= "/images/ myimage.gif" ></a> 

You could try this now by creating a folder called images in the 
folder where your HTML file is saved. Here is an illustration: 
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HTML Document 



Your HTML file 
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~ Chapter 5~ 

Links 

Without links webpages are pretty pointless. "Links" as the name 

suggests, are used to link one page to another. 

Links are very easy to create in HTML so lets get started. 

1. First of all we need something to link to. If you feel that you need 
more practice in HTML then you can create a new page from 
scratch. 

If not just copy the page you have already created and give it a 

different name, eg. "Pagel.html" 

Remember that you still need to be saving everything into the same 

folder. 

2. The HTML code for a link looks like this: 

<a href="name of your page here">Text that you want the 
user to see here</a> 

If you are linking to another website on the WWW then your link 
would look like this: 

<a href = "http://www.elpassobooks.co.uk"> Visit El Passo 
Books</a> 

When the above line of code is run, this is what the user would see: 
Visit El Passo Books 

For now though we are going to link your "index. html" file to your 

"Pagel.html" file. 

This is the code that needs to be placed in your "index. html" file 

<a href="Pagel.html">Click Here to go to my next 
page</a> 
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Have a look at the full code below to see where you should insert it: 

<html> 
<head> 

<title>My Own Home Page </title> 
</head> 

<body> 

<body bgcolor= "yellow"> 

<font color="Red"> 

<H1> I am Your-Name and this is my web Page!</Hl> 

<img src="images/myimage.gif"> 

<a href="Pagel.html">Click Here for my next page</a> 

</font> 

</body> 

TIP: Notice I have changed the background colour to yellow, this is 
because the default colour for a link in internet explorer is blue, 
obviously with a blue background the link is invisible 
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When you click on the link you should be taken to "Pagel.html", 
now for some practice at linking, why not try and put a link in 
"Pagel.html" back to "index. html" 

When you are satisfied with that, lets go to chapter 6 - Using 
Pictures as links. 
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~ Chapter 6~ 

Pictures as Links 

Often when you visit a website, they will have some buttons that 

will act as links. 

Eg: 




1. You already have an image used in your first page so lets now 
make that a link. We are going to make it link to "Pagel.html" 

2. The HTML code for an image link looks like this: 

<a href="Pagel.htmr><img 
src="images/yourpichere.jpg"x/a> 

If you are linking to another website on the WWW then your link 
would look like this: 

<a href = "http://www.elpassobooks.co.uk" ximg 
src="images/yourpichere.jpg"x/a> 

When the above line of code is run, this is what the user would see: 
(obviously your picture would be displayed not my "archive" 
button!) 



For now though we are going to link your "index. html" file to your 

"Pagel.html" file. 

This is the code that needs to be placed in your "index. html" file 

<a href="Pagel.htmr><img 
src="images/yourpichere.jpg"x/a> 

Remember to change the red text to the location of your picture. 
If your picture is in its own "Images" folder as discussed in a 
previous chapter then the above code would be used. 
If it is in the same folder as your "index.html" file then the following 
code would be used: 

<a href="Pagel.htmr , ximg src="yourpichere.jpg"x/a> 



©2006 Dan Thompson - All Rights Reserved - 13 



Basic HTML by El Passo Books v2.0 

Here is what your code should now look like: 

<html> 
<head> 

<title>My Own Home Page </title> 
</head> 

<body> 

<body bgcolor= "yellow"> 

<font color="Red"> 

<H1> I am Your-Name and this is my web Page!</Hl> 

<a href="Pagel.htmr><img 
src= "images/ myimage.gif" >< /a > 

<a href="Pagel.html">Click Here for my next page</a> 

</font> 

</body> 

That's probably the easiest chapter in the book and shouldn't have 
taken you too long. 

Next up is Chapter 7 - Formatting! 
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~ Chapter 7~ 

Formatting 

One of the most frustrating parts of HTML for beginners is simple 
formatting. Such as starting a new sentence on a new line, or 
aligning text to the left, right or middle. 
I'm am now going to show you the basics of formatting. 

1. Try and copy the following paragraph into your html document, 
then run it and see what result you get: (if you are unable to 
copy/paste just insert lots of random text into your page but make 
sure you insert some spaces like I have done) 

"This is a standard paragraph of text. Nothing to see here just 
typing some words for an HTML formatting example. 

HTML formatting can be difficult for novice users, so hopefully you 
will find this chapter as painless as possible. 

This is a cheap plug in a paragraph of text for my website 
www.elpassobooks.co.uk . If you find this guide helpful then you can 
have a look at my website for more great web guides written by 
me! 

End of my meaningless paragraph of text!" 

2. When you run your HTML file you should find it looks something 
like this: 

I am Your-Name and this is my web Page! 




Click Here for my next page "This is a standard paragraph of text. Nothing to see here just typing some words fc 
HTML formatting example. HTML formatting can be difficult for novice users, so hopefully you will find this chapter as pa 
possible. This is a cheap plug in a paragraph of text for my website www.elpassobooks.co.uk. If you find this guide helpful 
you can have a look at my website for more great web guides written by me! End of my meaningless paragraph of text!" 

Notice how although we left spaces between each sentence in our 
original paragraph, when we tried to view them in HTML there are 
no spaces, everything is just one massive paragraph. 
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3. To fix it we must use the following HTML tags: 

<p> - This is used for when you would like to start a new paragraph 
<br> - A page break, this is used for starting a new line 

Don't worry if this is all confusing, here is the paragraph again with 
the HTML tags, paste it into your document and then run it to see 
the results. 

<p> "This is a standard paragraph of text. <br>Nothing to see 
here just typing some words for an HTML formatting example. <p> 

HTML formatting can be difficult for novice users, so hopefully you 
will find this chapter as painless as possible. <p> 

This is a cheap plug in a paragraph of text for my website 
www.elpassobooks.co.uk . If you find this guide helpful then you can 
have a look at my website for more great web guides written by 
me! <p> 

End of my meaningless paragraph of text!" 

If you want to experiment try running it again but this time move 

around the <p>" s and <br>" s to see what effect they have on your 

paragraph. 

Remember practice makes perfect! 

Here is how your page should now look: 

I am Your-Name and this is my web Page! 



Click Here for my next page 




"This is a standard paragraph of text. 

Nothing to see here just typing some words for an HTML formatting example. 

HTML formatting can be difficult for novice users, so hopefully you will find this chapter as painless as possible. 

This is a cheap plug in a paragraph of text for my website www.elpassobooks.co.uk. If you find this guide helpful th 
have a look at my website for more great web guides written by me! 

End of my meaningless paragraph of text!" 
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4. This is a long chapter but don't worry your about half way 

through! 

Now we are going to look at aligning the text (Note - this method 

can be used on pictures, Flash and any other objects of your 

website) 

Aligning things is simple in HTML, these are the following tags to be 
used: 

<center>Text to be centered here</center> 

<p align =left>Text to be aligned left here</align> 

<p align =right>Text to be aligned right here</align> 

Lets try it out on our paragraph. Try and use the above tags to align 
your paragraph to the left, right and center. 
Here is what mine now looks like: 



"This is a standard paragraph of text. 
Nothing to see here just typing some words for an HTML formatting example. 

HTML formatting can be difficult for novice users, so hopefully you will find this chapter as painless as possible. 

s a cheap plug in a paragraph of text for my website www.elpassobooks.co.uk. Ifyou find this guide helpful then you can 
1 look at my website for more great web guides written by me! 

End of my meaningless paragraph of text!" 
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If you are struggling here is my code, have a look at the red parts 
and see if yours is the same: (notice I have also centered the 
image) 

<html> 
<head> 

<title>My Own Home Page </title> 
</head> 

<body> 

<body bgcolor= "yellow"> 

<font color="Red"> 

<H1> I am Your-Name and this is my web Page!</Hl> 

<center> <a href="Pagel.html"><img 

src="images/myimage.gif"x/a> </center> 

<a href="Pagel.html">Click Here for my next page</a> 

<center> <p>"This is a standard paragraph of text. <br>Nothing to 
see here just typing some words for an HTML formatting 
example. <p> </center> 

<p align = right> HTML formatting can be difficult for novice users, 
so hopefully you will find this chapter as painless as possible. <p> 
</align> 

<p align = left> This is a cheap plug in a paragraph of text for my 
website www.elpassobooks.co.uk . If you find this guide helpful then 
you can have a look at my website for more great web guides 
written by me!<p> </align> 

<p align = right> End of my meaningless paragraph of text!" 

</align> 

</font> 

</body> 

TIP: The spelling "center" is American, if you use the English 
spelling "Centre" your HTML will not work. 
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5. Now for the final part of the chapter! Sizing, underlining and 
making your text bold. 

There are a number of ways to alter the size of your text in HTML, I 
am going to show you what I feel is the easiest, you can use 
numbers ranging from 1 - 7 (1 is small, 7 is large) 

THIS IS SIZE 1 

THIS IS SIZE 2 
THIS IS SIZE 3 
THIS IS SIZE 4 

THIS IS SIZE 5 

THIS IS SIZE 6 

THIS IS SIZE 7 

Lets take our paragraph again, this time we will make the first 

paragraph size 5. 

This is the code to be used: 

<font size = 5> Your text goes here </font> 

This is how your 1st paragraph of code should now look, don't worry 
if you need to space out the HTML like I have done below: 

<center> 

<P> 

<font size =5> "This is a standard paragraph of text. <br>Nothing 
to see here just typing some words for an HTML formatting 
example. </font> 

<P> 
</center> 

You can obviously replace the number 5 with any number of your 
choice from 1-7. Experiment and see what results you get. 
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6. We are finally going to look at making our font Bold, Italic and 

Underlined. 

This is very simple, these are the following tags used: 

<b>Look at me im Bold</b> 

<\>Look at me im Italic</\> 
<u> Look at me im Underlined </u> 

Just like our other tags, the text you want to format goes in- 
between the open <b> and closed </b> tags. 

Try and use the three tags on your paragraph, experiment and see 

what results you get. 

Again if you are struggling below is my HTML code: 

<html> 
<head> 

<title>My Own Home Page </title> 
</head> 

<body> 

<body bgcolor= "yellow"> 

<font color="Red"> 

<H1> I am Your-Name and this is my web Page!</Hl> 

<centerxa href ="Pagel. htm l"ximg 

src="images/myimage.gif"></ax/center> 

<a href="Pagel.html">Click Here for my next page</a> 

<center> 

<P> 

<font size =5> <b> "This is a standard paragraph of text. 
<br>Nothing to see here just typing some words for an HTML 
formatting example. </b> </font> 

<P> 
</center> 

<p align = right> <i> HTML formatting can be difficult for novice 
users, so hopefully you will find this chapter as painless as possible. 
</i> <px/align> 

<p align = left> <u> This is a cheap plug in a paragraph of text for 
my website www.elpassobooks.co.uk . If you find this guide helpful 
then you can have a look at my website for more great web guides 
written by me! </u> <px/align> 
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<p align = right>End of my meaningless paragraph of 

text!"</align> 

</font> 

</body> 

Here is a shot of what my page now looks like with formatting: 




Z^lick Here for my next page 

"This is a standard paragraph of text. 
Nothing to see here just typing some words for an HTML formatting 

example. 

HTML formatting can be difficult for novice users, so hopefully you will find this chapter as painless as 

possible. 

Phis is a cheap plug in a paragraph of text for my website www.elpassobooks.co.uk. If you find this guide 
lelpful then you can have a look at my website for more great web guides written by me! 

End of my meaningless paragraph of text!" 



You will be glad to hear that that's the end of chapter 7. Up next is 
Chapter 8 - Tables! 
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-- Chapter 8-- 

Tables 

Tables come in very handy in HTML, not just for presenting data but 
also for designing the layout of your page. 

As you are new to HTML I am going to show you how to create your 
own basic table. Many beginners find tables very daunting and I 
was no different, don't worry if you don't get it first time, keep 
trying and it will eventually all fall into place! 

1. There are 3 main tags for the table we will be creating: 

Table - <table> 
Table Row - <tr> 
Table Cell - <td> 

I will now show you how to create the following table: 



Celll Cell2 


Cell3 Cell4 



And here's the code: 

<table border> 

<tr> 

<td>Cell K/td> 

<td>Cell 2</td> 

</tr> 

<tr> 

<td>Cell 3</td> 

<td>Cell 4</td> 

</tr> 

</table> 

As you can see, the first table row encloses cells 1 and 2; the 
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second table row encloses cells 3 and 4. Table rows always run 
horizontally. The contents of each cell - in this case, the words "Cell 
1" or "Cell 2" - are sandwiched between the <td> and </td> tags. 

In order to see the table, I added border to the table tag. This 
simply turns the border on. You can also specify its width by adding 
a number, as in <table border=5>. 

"Colspan" and "rowspan" 

You can also make a cell in one row stretch across two cells in 
another. Like this: 

Cell 1 

Cell 3 Cell 4 



To accomplish this, you have to use the colspan modifier. Just add 
colspan = 2 to the <td>, and voila! 



<table border> 

<tr> 

<td colspan=2>Cell K/td> 

</tr> 

<tr> 

<td>Cell 3</td> 

<td>Cell 4</td> 

</tr> 

</table> 



You can also do this: 
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Cell 1 Cell 2 
Cell 3 



Just add rowspan = 2 to the <td>, like so: 

<table border> 

<tr> 

<td rowspan = 2>Cell K/td> 

<td>Cell 2</td> 

</tr> 

<tr> 

<td>Cell 3</td> 

</tr> 

</table> 

Just remember: Rows run horizontally, columns run vertically. So 
if you want to stretch a cell horizontally, use colspan. To stretch a 
cell vertically, use rowspan. 

Try inserting some of the HTML code into your own webpage, play 
around with the parameters and try adding new rows or columns. 
If you would like a more detailed look at tables I can recommend 
Webmonkey 



You now know all the basics to start creating your own website, but 
don't leave just yet. The final two chapters are probably the most 

important. 

Chapter 9 contains a full list of all HTML Tags 
Chapter 10 contains vital information on how to publish your site 

onto the WWW. 
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-- Chapter 9-- 

List of Tags 

I have now shown you the basic HTML tags to get you started, but 
did you know about the following tags, some useful, some not so 
useful! 

Basic Tags 

<htmlx/html> 

Creates an HTML document 

<headx/head> 

Sets off the title and other information that isn't displayed on the 

Web page itself 

<bodyx/body> 

Sets off the visible portion of the document 

Header Tags 

<titlex/title> 

Puts the name of the document in the title bar 



Body Attributes 

<body bgcolor=?> 

Sets the background color, using name or hex value 

<body text=?> 

Sets the text color, using name or hex value 

<body link=?> 

Sets the color of links, using name or hex value 

<body vlink=?> 

Sets the color of followed links, using name or hex value 

<body alink=?> 

Sets the color of links on click 
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Text Tags 



<prex/pre> 

Creates preformatted text 

<hlx/hl> 

Creates the largest headline 

<h6x/h6> 

Creates the smallest headline 

<bx/b> 
Creates bold text 

<ix/i> 
Creates italic text 

<ttx/tt> 

Creates teletype, or typewriter-style text 

<citex/cite> 

Creates a citation, usually italic 

<em></em> 

Emphasizes a word (with italic or bold) 

<strongx/strong> 

Emphasizes a word (with italic or bold) 

<font size=?x/font> 

Sets size of font, from 1 to 7) 

<font color=?x/font> 

Sets font color, using name or hex value 
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Links 



<a href="URL"x/a> 
Creates a hyperlink 

<a href= ,, mailto:EMAIL"></a> 
Creates a mailto link 

<a name="NAME"x/a> 

Creates a target location within a document 

<a href="#NAME"x/a> 

Links to that target location from elsewhere in the document 



Formatting 

<px/p> 

Creates a new paragraph 

<p align=?> 

Aligns a paragraph to the left, right, or center 

<br> 

Inserts a line break 

<blockquote> 

</blockquote> 

Indents text from both sides 

<dlx/dl> 

Creates a definition list 

<dt> 

Precedes each definition term 

<dd> 

Precedes each definition 

<olx/ol> 

Creates a numbered list 

<lix/li> 

Precedes each list item, and adds a number 

<ulx/ul> 

Creates a bulleted list 
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<div align = ?> 

A generic tag used to format large blocks of HTML, also used for 

stylesheets 

Graphical Elements 

<img src="name"> 
Adds an image 

<img src="name" align = ?> 

Aligns an image: left, right, center; bottom, top, middle 

<img src="name" border=?> 

Sets size of border around an image 

<hr> 

Inserts a horizontal rule 

<hr size=?> 

Sets size (height) of rule 

<hr width = ?> 

Sets width of rule, in percentage or absolute value 

<hr noshade> 

Creates a rule without a shadow 



Tables 

<tablex/table> 
Creates a table 

<trx/tr> 

Sets off each row in a table 

<tdx/td> 

Sets off each cell in a row 

<thx/th> 

Sets off the table header (a normal cell with bold, centered text) 
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Table Attributes 

<table border=#> 

Sets width of border around table cells 

<table cellspacing = #> 

Sets amount of space between table cells 

<table cellpadding = #> 

Sets amount of space between a cell's border and its contents 

<table width = # or %> 

Sets width of table — in pixels or as a percentage of document 

width 

<tr align=?> or <td align = ?> 

Sets alignment for cell(s) (left, center, or right) 

<tr valign = ?> or <td valign = ?> 

Sets vertical alignment for cell(s) (top, middle, or bottom) 

<td colspan = #> 

Sets number of columns a cell should span 

<td rowspan = #> 

Sets number of rows a cell should span (default=l) 

<td nowrap> 

Prevents the lines within a cell from being broken to fit 
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Frames 



<frameset> </frameset> 

Replaces the <body> tag in a frames document; can also be nested 

in other framesets 

<frameset rows="value,value"> 

Defines the rows within a frameset, using number in pixels, or 

percentage of w width 

<frameset cols="value,value"> 

Defines the columns within a frameset, using number in pixels, or 

percentage of width 

<frame> 

Defines a single frame — or region — within a frameset 

<noframesx/noframes> 

Defines what will appear on browsers that don't support frames 



Frames Attributes 

<frame src="URL"> 

Specifies which HTML document should be displayed 

<frame name="name"> 

Names the frame, or region, so it may be targeted by other frames 

<frame marginwidth = #> 

Defines the left and right margins for the frame; must be equal to 

or greater than 1 

<frame marginheight=#> 

Defines the top and bottom margins for the frame; must be equal to 

or greater than 1 

<frame scrolling=VALUE> 

Sets whether the frame has a scrollbar; value may equal "yes," 

"no," or "auto." The default, as in ordinary documents, is auto. 

<frame noresize> 

Prevents the user from resizing a frame 
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Forms 



For functional forms, you'll have to run a CGI script. The HTML just 
creates the appearance of a form. 

<form></form> 
Creates all forms 

<select multiple name="NAME" size=?x/select> 

Creates a scrolling menu. Size sets the number of menu items 

visible before you need to scroll. 

<option> 

Sets off each menu item 

<select name="NAME"x/select> 
Creates a pulldown menu 

<option> 

Sets off each menu item 

<textarea name="NAME" cols=40 rows=8x/textarea> 
Creates a text box area. Columns set the width; rows set the 
height. 

<input type="checkbox" name="NAME"> 
Creates a checkbox. Text follows tag. 

<input type="radio" name="NAME" value="x"> 
Creates a radio button. Text follows tag 

<input type=text name="foo" size=20> 

Creates a one-line text area. Size sets length, in characters. 

<input type="submit" value="NAME"> 
Creates a Submit button 

<input type="image" border=0 name="NAME" src="name.gif"> 
Creates a Submit button using an image 

<input type="reset"> 
Creates a Reset button 
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-- Chapter 10 ~ 

Uploading to the Web 

I know what your thinking; What the point of all this if nobody else 

can see my site? 

Well let me show you how to upload your website to the internet. 

I am going to show you how to upload using the FREE Smart FTP 
web-publishing wizard. If you don't have it on your PC, it can be 
downloaded for free here: 

http://www.smartftp.com/ 

1. The first thing that you need is host, when you sign up with a 
host you will usually receive the following: 

• A number of email accounts - Eg. 
yourname@yourdomain.co.uk 

• Webspace - This is like your own hard-drive but on the 
internet (Usually in MB) 

• Bandwidth - This is the amount of traffic your site is able to 
handle (Usually in GB) 

Some hosts will also offer you incentives to sign up like free 
software, guestbooks for your site, shopping carts etc. 

I have managed to get you a special deal with a UK based host 
called "1st Choice Hosting". The special package that I have created 
for you includes everything you need to get started! 

I also managed to get you a HUGE saving on the price. The regular 
price for this package would be over £12. 00pm, however I have 
managed to secure this package for only £4.99 pm, it comes with a 
no strings 30 day money back guarantee as well! 

Click here for more information (internet connection required) 

You will also need to get yourself a domain name. At the time of 

writing these are very cheap at only £1.99 per year for a .co.uk 

domain name! Click HERE to buy yours whilst the price is so low. 
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3. Now that you have a host ready, you need to transfer your 
website from your PC, to the host. 

This is done through a procedure called "FTP - File Transfer 
Protocol" Now you have downloaded Smart FTP you can follow these 
video tutorials to upload your website: 

Connecting to your host 

http://www.smartftp.com/support/howto/flash/connect.htnn 
Uploading your files to the host 

http://www.smartftp.com/support/howto/flash/upload.htm 

You can also find a full list of video tutorials from the link 

below: 

http://www.smartftp.com/support/howto/ 
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Thank you for reading this e-Book, I hope that you have found the 
information valuable and that this has helped you to create your 
very own website. I look forward to hearing about your future 
success! 

Remember that you can get a FREE Brandable version of this e- 
Book to promote your new website and earn instant commissions by 
clicking here ! 

Regards, 

Dan 

http://www.elpassobooks.co.uk 



Before You Continue... 

DISCOVER HOW YOU CAN MAKE 

LOADS OF INSTANT COMMISSION 

ON COMPLETE AUTOPILOT 

WITH THIS WEBSITE: 
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Click Here Now Before It's Gone! 



Click here to check for updates to this e-book 
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